<template>
  <div class="app-container">
    <div class="message-box">
      <!-- 具名插槽  -->
      <div class="box-title">
        <slot name="box-title">默认header</slot>
      </div>

      <!-- 默认插槽，name='default'，通过v-bind变为了作用域插槽 -->
      <div class="box-content">
        <slot v-bind:user="userData">无名称slot(name=default)默认值</slot>
      </div>


      <!-- 具名插槽 -->
      <div class="box-footer">
        <slot name="box-footer">默认footer</slot>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userData: {
          age: 20,
          name: 'czc',
          gender: 'man'
        }
      }
    }
  }

</script>

<style lang='scss' scoped>
  .message-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px 2px rgba($color: #000000, $alpha: .1);

    .box-title {
      color: skyblue;
      font-size: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }

    .box-content {
      padding: 20px 0;
    }

    .box-footer {
      padding-top: 10px;
      border-top: 1px solid #ccc;
      color: green;
      font-size: 14px;
    }
  }

</style>
